<template>
  <Card style="height: 100%">
    <Row style="height: 82vh">
      <Col span="4" style="height: 100%">
        <api-tree @changeSelect="changeSelect" @addInterface="addInterface"/>
      </Col>
      <Col span="20" style="height: 100%;padding-left: 20px">
        <Table :columns="columns" :data="data" border>
          <template slot-scope="{ row, index }" slot="action">
            <Button type="primary" size="small" style="margin-right: 5px" @click="handleEdit(row.id)">编辑</Button>
            <Button type="primary" size="small" style="margin-right: 5px" @click="handleAddCase(row.id)">创建用例</Button>
            <Button type="error" size="small" @click="remove(row.id)">删除</Button>
          </template>
        </Table>
        <div style="margin-top: 10px;float: right">
          <Page :total="total" :current="searchForm.page" :page-size="searchForm.page_size" @on-change="handleChange"
                @on-page-size-change="handleSize" show-sizer show-total show-elevator/>
        </div>
      </Col>
    </Row>
    <interface-modal :title="title" :show="show" :edit="edit" :id="id" @closeModal="closeModal" @query="query"/>
<!--    <case-modal :title="caseTitle" :visible="visible" :interfaceId="interfaceId" @closeCaseModal="closeCaseModal"/>-->
    <case-modal :title="caseTitle" :visible="visible" :interfaceId="interfaceId" :caseId="caseId" :edit="edit" @closeCaseModal="closeCaseModal"/>

  </Card>
</template>

<script>
import api_tree from "@/view/interface/api_tree";
import caseModal from "@/components/caseModal";
import interfaceModal from "@/components/interfaceModal";
import {apiSearchList, delApi} from "@/utils/api";

const methodColorMap = {
  GET: 'primary',
  POST: 'success',
  DELETE: 'error',
  PUT: 'warning',
  PATCH: 'orange'
}

const columns = [
  {
    title: '接口名称',
    key: 'name'
  },
  {
    title: '请求URL',
    key: 'url',
    render: (h, params) => {
      return h('div', [
        h('span', {
          style: {
            display: 'inline-block',
            width: '100%',
            overflow: 'hidden',
            textOverflow: 'tooltip',
            whiteSpace: 'nowrap'
          },
          domProps: {
            title: params.row.url
          }
        }, params.row.url)
      ])
    }
  },
  {
    title: '请求方式',
    key: 'method',
    render: (h, params) => {
      const requestMethod = params.row.method;
      const tagColor = methodColorMap[requestMethod] || 'purple'
      return h('div', [
        h('Tag', {
          props: {
            color: tagColor,
          },
          domProps: {
            title: params.row.method,
          },
        }, params.row.method),
      ])
    }
  },
  {
    title: '模块名称',
    key: 'product_name',
    render: (h, params) => {
      return h('div', [
        h('span', {
          style: {
            display: 'inline-block',
            width: '100%',
            overflow: 'hidden',
            textOverflow: 'tooltip',
            whiteSpace: 'nowrap'
          },
          domProps: {
            title: params.row.product_name
          }
        }, params.row.product_name)
      ])
    }
  },
  {
    title: '维护人员',
    key: 'created_user'
  },
  {
    title: '创建时间',
    key: 'created'
  },
  {
    title: '操作',
    slot: 'action',
    width: 220,
    align: 'center'
  }
]
export default {
  name: "api_list",
  data() {
    return {
      searchForm: {
        project: null,
        product: null,
        page: 1,
        size: 10
      },
      columns,
      data: [],
      show: false,
      visible: false,
      title: "",
      caseTitle: "",
      versionId: null,
      total: 0,
      caseId:0,
      current: 0,
      edit: false,
      id: 0,
      interfaceId: 0
    }
  },
  components: {
    "api-tree": api_tree,
    interfaceModal,
    caseModal
  },
  created() {
    this.changeSelect(0);
  },
    watch: {
    selectProject(newVal, oldVal) {
      this.changeSelect(0);
    }
  },
  computed: {
    selectProject: {
      get() {
        console.log('1111')
        return this.$store.state.selectProject;
      },
      set(value) {
        console.log('2222')
        this.$store.commit("updateSelectProject", value)
      }
    }
  },
  methods: {
    handleAddCase(id) {
      this.caseTitle = "新建用例";
      this.interfaceId = id;
      this.visible = true;
    },
    closeCaseModal() {
      this.visible = false;
    },
    handleEdit(id) {
      this.show = true;
      this.edit = true;
      this.id = id;
      this.title = "编辑接口"
    },
    addInterface() {
      this.show = true;
      this.title = "新增接口"
    },
    closeModal() {
      this.edit = false;
      this.id = 0;
      this.show = false
    },
    handleChange(e) {
      this.searchForm.page = e;
      this.query();
    },
    handleSize(e) {
      this.searchForm.page_size = e
      this.query()
    },
    changeSelect(e) {
      console.log(e)
      // 如果等于0的时候查询全部接口
      if (e == 0) {
        this.searchForm.project = parseInt(localStorage.getItem("project"));
        this.searchForm.product = null;
        console.log(this.searchForm)
        this.handleApiList()
      } else {
        this.searchForm.product = e;
        this.searchForm.project = null;
        this.handleApiList()
      }
    },
    handleApiList() {
      apiSearchList(this.searchForm).then(res => {
        if (res.data.result === 1){
          this.data = res.data.data.list;
          this.total = res.data.data.total;
        }
      })
    },
    query() {
      if (this.current == 0) {
        this.handleApiList()
      } else {
        this.handleApiList()
      }
    },
    remove(id){
      delApi({id: id}).then(res=>{
        if (res.data.result === 1) {
          this.$Message.success("接口删除成功!")
          this.handleApiList()
        }
      })
    }
  }
}
</script>

<style scoped>
.content {
  display: flex;
  height: 82vh;
}

.left {
  float: left;
  width: 260px;
  height: 100%;
  border-right: aliceblue 1px solid;
}

.right {
  flex: 1;
  margin-left: 10px;
}
</style>
